Web Workers
455 字
2 分钟
Web Workers
JavaScript是一种单线程编程语言，这便意味着不论你电脑配置有多高，JS只会用单核CPU来执行任务，其余cores基本都会处在闲置状态
但是事件循环（event loop）解决这这种限制，事件循环最重要的一点就是非阻塞
举一个实际的例子，假设页面中有两个按钮，其中一个用来进行IO密集的计算，另外一个用于修改页面的背景颜色。如果我们先点击“计算”的按钮，再点击“修改背景颜色”的话，会出现什么情况呢？只要计算量够大，就会出现等待很长一段时间之后，背景颜色才会被修改
这显然是很糟糕的，而Web Workers就可以把IO密集的计算任务交给一个新的线程执行，无需占用主进程，做法如下：
- 在主进程脚本中创建一个
worker对象
// 这里的 worker.js 中写了我们要完成的IO密集任务const worker = new Worker("worker.js");- 通过绑定点击事件，来触发 worker 执行任务
const totalButton = document.getElementById("total");
totalButton.addEventListener("click", () => { worker.postMessage("Hello worker");});- 将IO密集任务写入
worker.js中
// 这里的 message.data 就是上面的 `Hello worker`onmessage = function (message) { console.log(message); console.log("Worker has started working"); let total = 0; for (let i = 1; i <= 10000000000; i++) { total += 1; } console.log("Worker has finished working");
// 计算完成后，将数据传递给主进程 this.postMessage(total);};- 从
worker获取计算结果
worker.onmessage = function (message) { console.log(`The total is ${message.data}`);};因此总结一下 Web Worker 的使用场景：
- 图片/视频处理、编解码
- 大数据排序、解析（如 JSON 解析、CSV 处理）
- 加密、压缩、Canvas 渲染
- 防止复杂计算阻塞 UI 交互
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
WebMCP尝鲜
fe你需要给你的Web应用添加WebMCP了
2
Event Loop
fe2026-08-31
3
人生第一次漫展
daily2026-10-05
4
论学长
想太多学长是一个短期称谓，总有失去，无法拾起的一天
5
Zen浏览器自定义
教程浏览器默认样式太丑，通过CSS修改配置文件来优化样式
随机文章随机推荐